<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>forgot</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../css/login.css">
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

</head>
<body>


<section>

    <div class="color"></div>

    <div class="color"></div>

    <div class="color"></div>

    <div class="box">

        <div class="square" style="--i:0;"></div>

        <div class="square" style="--i:1;"></div>

        <div class="square" style="--i:2;"></div>

        <div class="square" style="--i:3;"></div>

        <div class="square" style="--i:4;"></div>

        <div class="container">
            <div class="form">
                <h2>Phone Login</h2>
                <form role="form">
                    <!-- 手机号 -->

                    <div class="form-group inputBox">
                        <div class="input-group">
                            <div class=" addon input-group-addon"><i class="fas fa-phone-alt"></i></div>
                            <input type="email" class="form-control" placeholder="请输入手机号" id="phonenum">
                        </div>
                    </div>
                    <!-- 手机号/邮箱 -->
                    <div class="form-group inputBox">
                        <label></label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="inp_code" placeholder="请输入验证码">
                            <span class="input-group-btn">
                            <button type="button" class="btn btn-default login-btn" id="getmsg">获取验证码</button>
                        </span>

                        </div>
                    </div>
                    <!-- 单选框 -->
                    <div class="switch-field">
                        <input type="radio" id="radio-one" name="usertype" value="emp" checked/>
                        <label for="radio-one">物业</label>
                        <input type="radio" id="radio-two" name="usertype" value="household"/>
                        <label for="radio-two">业主</label>
                    </div>
                    <label></label>
                    <!-- 登录按钮 -->
                    <button type="button" id="dologin" class="btn btn-primary login-btn btn-block">登录</button>
                    <div class="re_pswd">
                        <a href="/login.html" style="position: absolute;right: 40px">账号登录</a>
                    </div>
                </form>
            </div>
        </div>

    </div>

</section>


<script>

    $(function () {
        let phone_reg = /^1([3,5,7,8,9,][0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/

        let code

        $("#getmsg").on("click", function () {
            let phonenum = $("#phonenum").val()
            if (phone_reg.test(phonenum)) {
                $.ajax({
                    url: "sendmsg",
                    dataType: "json",
                    data: {
                        phonenum: phonenum
                    },
                    success: function (resp) {
                        if (resp.state) {
                            layer.msg('验证码发送成功');
                            code = resp.code
                        }else{
                            layer.msg('发送失败，请稍后重试')
                        }

                    }
                })
            } else {
                layer.msg('电话号码格式不正确', {icon: 5});
            }
        })
        $("#dologin").on("click", function () {
            let inp_code = $("#inp_code").val()
            let phonenum = $("#phonenum").val()
            let userType = $("input[name='usertype']:checked").val()
            if (code == inp_code) {//验证码正确
                $.ajax({
                    url: "phonelogin",
                    dataType: "json",
                    data: {
                        phonenum: phonenum,
                        usertype: userType
                    },
                    success: function (resp) {
                        if (resp === 1) {
                            location.href = "http://localhost:8686/index.html"
                        } else {
                            layer.msg('该用户不存在', {icon: 5});
                        }
                    }
                })
            } else {
                layer.msg('验证码输入有误', {icon: 5});
            }
        })
    });

</script>
</body>
</html>